import React, { Component } from 'react';
import { routerRedux } from 'dva/router';
import { Flex, Stepper, Icon, Modal, Button, Toast } from 'antd-mobile';
import CanChangeScroll from '../../components/CanChangeScroll/CanChangeScroll';
import NoLazyImg from '../../components/NoLazyImg/NoLazyImg';

import { activity_list, activity_model } from "./activityList.less";

class ActivityList extends Component {
    constructor(props) {
        super(props);
        this.state={
            vsible:false
        }

        this.list = [];
    }




    render() {
        const { shopActivityList } = this.props;
        let { vsible } = this.state;
        let showList = [];


        return (
            <Flex className={activity_list} justify="between">
                <Flex style={{ width:"100%" }} align="start" justify="between" onClick={() => this.setState({ vsible: true })}>
                    <div style={{ color:"#666" }}>促销：</div>
                    <div className="activity_list">
                        {
                            shopActivityList.map((v,i,a )=> {
                                if (!v.activityInfo[0]) return false;
                                // if (showList.includes( v. ))
                                // console.warn(this.list.includes(v.activityName), 'this.list.includes(v.activityName)');
                                if ( this.list.includes(v.activityName) ) return false;
                                else this.list.push(v.activityName);

                                if (i == a.length - 1) this.list = [];

                                return (
                                    <div className="text-overflow-hidden" style={{  marginBottom:"0.1rem" }} key={i}>
                                        <span className="activity_name">{v.activityName}</span>
                                        <span style={{ fontSize:'0.22rem' }}>
                                         {
                                             v.activityInfo.map((vv,ii,aa)=>{
                                                 return vv
                                             })
                                         }
                                         </span>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <Icon style={{width: '.3rem', height: '.3rem', verticalAlign: "middle" }} type="right"/>
                </Flex>


                <Modal
                    popup
                    visible={vsible}
                    animationType="slide-up"
                    maskClosable={true}
                    className={activity_model}
                    onClose={() => { this.setState({ vsible: false }); }}
                    closable={true}
                    title="促销"
                >
                    <CanChangeScroll wrapperId="goodsDetailActivityListWraperId" targetId="goodsDetailActivityListTargetId" className="scroll">
                        <div className="activity_list">
                            {
                                shopActivityList.map((v,i,a )=> {
                                    return (
                                        <Flex className="activity_item" key={i}>
                                            <div className="activity_name">{v.activityName}</div>
                                            <div style={{ fontSize:'0.22rem' }}>
                                                 {
                                                     v.activityInfo.map((vv,ii,aa)=>{
                                                         return vv
                                                     })
                                                 }
                                            </div>
                                        </Flex>
                                    )
                                })
                            }
                        </div>
                    </CanChangeScroll>
                </Modal>
            </Flex>
        );
    }
}

export default ActivityList;
